<!-- 货架管理 -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header height="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="选择仓库">
              <!-- <el-select v-model="form.warehouseId" placeholder="请选择仓库" :loading="loading">
    <el-option 
      v-for="item in options" 
      :key="item.warehouseId" 
      :label="item.warehouseName" 
      :value="item.warehouseId"
    />
  </el-select> -->
              <el-select placeholder="请选择仓库" v-model="form.warehouseId">
                <el-option :value="0" label="请选择">请选择</el-option>
                <el-option :value="1" label="盐城消防立体库">盐城消防立体库</el-option>
                <el-option :value="2" label="穰城消防立体库">穰城消防立体库</el-option>
              </el-select>
            </el-form-item>
          </el-col>&emsp;
          <el-col :span="8">
            <el-form-item label="货架名称">
              <el-input placeholder="请输入货架名称" style="width: 200px" v-model="form.shelfName" />&emsp;
            </el-form-item>
          </el-col>&emsp;
          <el-col :span="6">
            <el-button type="primary" @click="queryWarehouse">查询</el-button>
          </el-col>
        </el-row>
        <el-button @click="dialogVisible = true" type="primary">添加</el-button>
      </el-header>
      <el-main style="height: 300px;">
        <div class="shelf-management">
          <el-table :data="shelfList" style="width: 100%;">
            <el-table-column prop="shelfId" label="序号" />
            <el-table-column prop="shelfName" label="货架名称" />
            <el-table-column prop="shelfCode" label="货架编码" />
            <el-table-column prop="wareHouseName" label="所属库房" width="150px" />
            <el-table-column prop="shelfId" label="货架号" />
            <el-table-column prop="shelfStatus" label="状态">
              <template #default="{ row }">
                <span :class="row.shelfStatus === true ? 'enable' : 'disable'">
                  {{ row.shelfStatus === true ? '启用' : '禁用' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160px">
              <template v-slot="">
                <el-button link type="primary">编辑</el-button>
                <el-button link type="primary">查看</el-button>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <el-pagination style="margin-top: 10px;" v-model:current-page="paging.pageIndex"
          v-model:page-size="paging.pageSize" :page-sizes="[2, 3, 5]" :background="true"
          layout="total, sizes, prev, pager, next, jumper" :total="paging.totalCount" />
      </el-footer>
    </el-container>
  </div>
  <!-- 添加货架弹框 -->
  <el-dialog v-model="dialogVisible" title="添加货架" width="600" draggable>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货架名称">
            <el-input placeholder="请输入货架名称" style="width: 200px" v-model="addForm.shelfName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货架编码">
            <el-input placeholder="请输入货架编码" style="width: 200px" v-model="addForm.shelfCode" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属库房" style="width: 266px">
            <el-select placeholder="请选择仓库" v-model="addForm.warehouseId">
              <el-option :value="1" label="盐城消防立体库">盐城消防立体库</el-option>
              <el-option :value="2" label="穰城消防立体库">穰城消防立体库</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属库区">
            <el-select placeholder="请选择库区" v-model="addForm.storage_AreaId">
              <el-option value="1" label="医疗区">医疗区</el-option>
              <el-option value="2" label="救援区">救援区</el-option>
              <el-option value="3" label="管理区">管理区</el-option>
              <el-option value="4" label="战勤区">战勤区</el-option>
              <el-option value="5" label="食品区">食品区</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属巷道">
            <el-input placeholder="请选择" style="width: 200px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状    态">
            <el-radio-group v-model="addForm.shelfStatus">
              <el-radio :value="true" label="启用">启用</el-radio>
              <el-radio :value="false" label="停用">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="最大容量">
        <el-input placeholder="请输入容量" style="width: 200px" type="number" v-model="addForm.max_Weight" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input placeholder="请输入备注" style="width: 500px" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addData">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { addGoods, GoodsSHow } from "@/api/Index"
import axios from "axios"
//import type { WarehouseResult, ShelfResult } from "@/api/type"
//import { GetWareHouse,GetStorageArea } from "@/api/Index"

const router = useRouter()

//添加弹框
const dialogVisible = ref(false)

//   const selectedValue = ref(''); // 绑定选中值
// const options = ref([]);        // 存储接口返回的选项数据
// const loading = ref(false);     // 加载状态




const paging = reactive({
  pageIndex: 1,
  pageSize: 5,
  totalCount: 1,
  pageCount: 1
})


watch(paging, () => {
  getshelfListList()
})

//钩子
onMounted(() => {
  getshelfListList()
  //handleWareHousde()
  //handleStorageArea()
})
//查询按钮
const queryWarehouse = () => {
  getshelfListList()
}

const addForm = reactive({
  storage_AreaId: '',//库区
  warehouseId: '',//库房
  shelfName: "",//货架
  shelfCode: "",//货架编码
  max_Weight: '',//容量
  shelfStatus: true,
  del_Flag: false,
})
//添加弹框保存按钮
const addData = () => {
  addGoods(addForm).then(res => {
    if (res.code === 200) {
      ElMessage.success("货架添加成功")
      dialogVisible.value = false
      getshelfListList()
    } else {
      ElMessage.error("货架添加失败")
    }
  })
}
//查询条件
const form = ref({
  PageIndex: paging.pageIndex,
  PageSize: paging.pageSize,
  warehouseId: null,
  shelfName: null,
})

const shelfList = ref<any>([])

const getshelfListList = () => {
  GoodsSHow(form.value).then(res => {

    shelfList.value = res.data.list
    paging.totalCount = res.data.totalCount
    paging.pageCount = res.data.totalPage
  })
}
const formdata = reactive({
  warehouseId: null,
  storageId: null,
})


</script>

<style scoped>
.warehouse-management {
  margin: 20px;
}
</style>